<template>
  <div class="rose-echarts">
    <base-echarts :options="options" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import baseEcharts from './base-echarts.vue'
  import type { EChartsOption } from 'echarts'
  import type { IEchartValueType } from '../types'

  interface IProps {
    roseData: IEchartValueType[]
  }

  const $props = withDefaults(defineProps<IProps>(), {})
  const options = computed<EChartsOption>(() => ({
    /*  legend: {
      top: 'bottom'
    }, */
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
      {
        name: '玫瑰图',
        type: 'pie',
        radius: ['25%', '80%'],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          }
        },
        // top: 40,
        data: $props.roseData
      }
    ]
  }))
</script>

<style lang="scss" scoped></style>
